<template>
  <h3 class="back" style="background-color:dodgerblue;font-weight: 100;font-size: small;height: 20px;padding-left: 10px;">系谱信息</h3>
    <el-row type="flex" justify="" style="margin-top: 200px;" >
        <el-col :span="6">
              
              <div class="id1" align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top:150px;height: 25px;">
                {{ famData.earNumber }}             
              </div>

        </el-col>

        <el-col :span="6">
          <div v-if="famData.farEarNumber==null" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 20px;height: 25px;">
            无
          </div>
          <div v-else align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top: 20px;height: 25px;">
            {{famData.farEarNumber}}
          </div>

          <!-- 隔开 -->
          <div class="id3" align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 300px;height: 25px;">
            <span v-if="famData.moEarNumber==null">无</span>
            <span v-else>{{ famData.moEarNumber }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div v-if="grandePar.farEarNumber==null" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: -100px;height: 25px;">
            无
          </div>
          <div v-else align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top: -100px;height: 25px;">
            {{grandePar.farEarNumber}}
          </div>
           <!-- 隔开 -->
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
            <span v-if="grandePar.moEarNumber==null" >无</span>
            <span v-else>{{ grandePar.moEarNumber }}</span>
          </div>
           <!-- 隔开 -->
          <div v-if="grandeMa.farEarNumber==null" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
             无
          </div>
          <div v-else align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
            {{grandeMa.farEarNumber}}
          </div>
           <!-- 隔开 -->
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 180px;height: 25px;">
            <span v-if="grandeMa.moEarNumber==null" >无</span>
            <span v-else>{{ grandeMa.moEarNumber }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: -150px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 80px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 40px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 80px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 40px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 80px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 60px;height: 25px;">
            <span>无</span>
          </div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 80px;height: 25px;">
            <span>无</span>
          </div>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElTable } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const route = useRoute();

const famData:any=ref([])
const getData=()=>{
  axios.get('http://localhost:5039/api/SleepBegin/GetSleepInfo?sleepInforId='+route.query.id).then(res=>{
    console.log(res)
    famData.value=res.data.item
    let id=res.data.item.farEarNumber
    let id1=res.data.item.moEarNumber
    getParData(id)
    getMaData(id1)
  })
}

const grandePar:any=ref([])
const getParData=(id:any)=>{
  axios.get('http://localhost:5039/api/SleepBegin/SearchCode?code='+id).then(res=>{
    console.log(res)
    grandePar.value=res.data.data
  })
}

const grandeMa:any=ref([])
const getMaData=(id1:any)=>{
  axios.get('http://localhost:5039/api/SleepBegin/SearchCode?code='+id1).then(res=>{
    console.log(res)
    grandeMa.value=res.data.data
  })
}



onMounted(()=>{
  getData()
})
</script>
<style>
.back {
  background: linear-gradient(to  right,dodgerblue , white); /* 从左上角的红色到右下角的蓝色渐变 */
}
</style>

